<template>
  <div style="padding: 10px">
    <el-container>
      <el-header>
        <el-page-header @back="goBack" content="术语库版本"></el-page-header>
      </el-header>
      <el-main>
        <el-row class="bottom-space">
          <el-col :span="8">
            <el-button type="primary" size="small" @click="getNewVersionInfo">手工封板</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-table highlight-current-row :data="versionList" border :height="tableHeight">
            <el-table-column label="版本号" prop="version"></el-table-column>
            <el-table-column :formatter="dateFormat" label="时间" prop="updatedTime"></el-table-column>
            <el-table-column label="术语条数" prop="number"></el-table-column>
            <el-table-column label="新增条目数" prop="addition"></el-table-column>
            <el-table-column label="修改条目数" prop="modification"></el-table-column>
            <el-table-column label="备注" prop="comments"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-link @click="download(scope.row.id)">下载</el-link>
                <el-link @click="showPreview(scope.row.id)">查看</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-main>
    </el-container>
    <el-dialog :visible="dialogVisible" title="版本信息" @close="dialogVisible = false" width="400px">
      <div>
        <el-row class="small-bottom-space">
          <el-col :span="8">
            <span class="label">版本号</span>
          </el-col>
          <el-col :span="16">{{versionInfo.version}}</el-col>
        </el-row>
        <el-row class="small-bottom-space">
          <el-col :span="8">
            <span class="label">术语条数</span>
          </el-col>
          <el-col :span="16">{{versionInfo.total}}</el-col>
        </el-row>
        <el-row class="small-bottom-space">
          <el-col :span="8">
            <span class="label">新增条目数</span>
          </el-col>
          <el-col :span="16">{{versionInfo.addition}}</el-col>
        </el-row>
        <el-row class="small-bottom-space">
          <el-col :span="8">
            <span class="label">修改条目数</span>
          </el-col>
          <el-col :span="16">{{versionInfo.modification}}</el-col>
        </el-row>
        <el-row class="small-bottom-space">
          <el-col :span="8">
            <span class="label">封板时间</span>
          </el-col>
          <el-col :span="16">{{versionInfo.date}}</el-col>
        </el-row>
        <el-row class="small-bottom-space">
          <el-col :span="8">
            <span class="label">封板人</span>
          </el-col>
          <el-col :span="16">{{versionInfo.user}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-input type="textarea" :rows="3" placeholder="备注" v-model="versionInfo.comments"></el-input>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false" size="small" plain>取 消</el-button>
        <el-button type="primary" @click="makeNewVersion" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";

export default {
  name: "TermLibHistory",
  data() {
    return {
      versionList: [],
      tableHeight: 100,
      searchContent: "",
      dialogVisible: false,
      versionInfo: {
        version: 0,
        total: 0,
        addition: 0,
        modification: 0,
        date: "",
        user: "",
        comments: ""
      }
    }
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    makeNewVersion() {
      this.dialogVisible = false
      this.axios.get("/pmph/action/term/makeNewVersion", {
        params: {
          comments: this.versionInfo.comments
        }
      }).then(() => {
        this.loadData()
      })
    },
    download(id) {
      window.location.href = "/pmph/action/term/downloadTermLib?id=" + id
    },
    showPreview(id) {
      this.$router.push({
        path: "/term/lib/detail",
        query: {historyId: id}
      })
    },
    getNewVersionInfo() {
      this.axios.get("/pmph/action/term/selectNewVersionInfo").then(response => {
        this.versionInfo = response.data.versionInfo
        this.dialogVisible = true
      })
    },
    loadData() {
      this.axios.get("/pmph/action/term/selectTermLibHistory").then(response => {
        this.versionList = response.data
      })
    },
    dateFormat: function (row, column) {
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD  HH:mm:ss")
    },
  },
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 162
    this.loadData()
  }
}
</script>

<style scoped>
.bottom-space {
  margin-bottom: 10px;
}

.small-bottom-space {
  margin-bottom: 5px;
}

.label {
  font-weight: bold;
}
</style>
